<template>
    <div>
        <div>
            <el-button type="primary" @click="dialog=true;isAdd=true">+新增</el-button>
        </div>
        <el-table :data="tableData"  border :lazy="true" :stripe="true" max-height="500"
                  style="width: 100%">
            <el-table-column prop="id" label="id" width="120"></el-table-column>
            <el-table-column prop="name" label="名称" width="120"></el-table-column>
            <el-table-column prop="author" label="作者" width="120"></el-table-column>
            <el-table-column prop="price" label="价格" width="100"></el-table-column>
            <el-table-column prop="inventory" label="库存" width="100"></el-table-column>
            <el-table-column prop="synopsis" label="简介" width="600"></el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
                    <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--        dialog-->
        <el-drawer
            :title="!isAdd?'编辑图书':'添加图书'"
            :visible.sync="dialog"
            direction="ltr"
            :before-close="handleDrawerClose"
            custom-class="demo-drawer"
            ref="drawer"
            size="35%"
        >
            <div class="demo-drawer__content">
                <el-form :model="form" v-loading="loading" element-loading-text="拼命提交中"
                         element-loading-spinner="el-icon-loading">
                    <el-form-item label="名称:" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="作者:" :label-width="formLabelWidth">
                        <el-input v-model="form.author" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="价格:" :label-width="formLabelWidth">
                        <el-input v-model="form.price" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="库存:" :label-width="formLabelWidth">
                        <el-input v-model="form.inventory" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="简介:" :label-width="formLabelWidth">
                        <el-input v-model="form.synopsis" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item v-if="isAdd===true" label="封面:" :label-width="formLabelWidth">
                        <el-upload
                            ref="upload"
                            class="upload-demo"
                            :auto-upload="false"
                            action
                            :limit="2"
                            :multiple="false"
                            :file-list="fileList"
                            :on-change="handleChang"
                            list-type="picture">
                            <el-button size="small" type="primary">选取文件</el-button>
                        </el-upload>
                    </el-form-item>

                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="submit" :loading="loading">{{
                            loading ? '提交中 ...' : '确 定'
                        }}
                    </el-button>
                </div>

            </div>
        </el-drawer>
    </div>
</template>
<script>
import {deleteBook, getAllBook, updateBook,addBook} from "@/api";
import getMessage from "@/utils/message";
export default {
    name: "Mall",
    data() {
        return {
            loading: false,
            tableData: [],
            dialog: false,
            formLabelWidth: '80px',
            isAdd:false,
            uploadHeaders:{},
            fileList: [],
            form: {
                id:0,
                name: '',
                author: '',
                price: '',
                inventory:'',
                synopsis: '',
            },
        }
    },

    methods: {
        //删除图书
        handleDelete(scope) {
            this.$confirm('此操作将永久删除该图书, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteBook({params:{id: scope.row.id}}).then(res => {
                    getMessage(res.data.code,"删除")
                    this.getList()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        //点击编辑
        handleEdit(scope) {
            this.dialog = true
            this.form.id=scope.row.id
            this.form.name=scope.row.name
            this.form.author=scope.row.author
            this.form.price=scope.row.price
            this.form.inventory=scope.row.inventory
            this.form.synopsis=scope.row.synopsis
        },
        handleChang(file,filList){
            if(filList.length===2){
                this.fileList=[]
            }
            this.fileList.push(file)
        },
        //取消表单
        cancelForm() {
            this.loading = false;
            this.dialog = false;
            this.isAdd=false
            this.form={
                id:0,
                name: '',
                author: '',
                price: '',
                inventory:'',
                synopsis: ''
            }
            this.fileList=[]
        },
        //抽屉关闭前调用
        handleDrawerClose(){
            this.cancelForm()
        },
        //添加或者更新图书信息
        submit() {
            this.loading=true
            const params = new FormData()
            if(this.fileList.length>0){
                // 使用form表单的数据格式
                // 将上传文件数组依次添加到参数paramsData中
                params.append('photo', this.fileList[0].raw)
                // 将输入表单数据添加到params表单中
                params.append('name', this.form.name)
                params.append('author', this.form.author)
                params.append('price', this.form.price)
                params.append('inventory', this.form.inventory)
                params.append('synopsis', this.form.synopsis)
            }
            //添加逻辑
            if(this.isAdd){
                console.log('要添加喽')
                addBook(params).then(res=>{
                    console.log(res)
                    getMessage(res.data.code,"添加")
                    this.cancelForm()
                    this.getList()
                })
            }else{
                console.log('要更新喽')
                console.log(this.form)
                //更新逻辑
                updateBook(this.form).then(res => {
                    getMessage(res.data.code,"更新")
                    this.cancelForm()
                    this.getList()
                })
            }
            this.$refs.drawer.closeDrawer()
        },
        getList() {
            getAllBook().then(res => {
                this.tableData = res.data.data
            })
        }
    },
    mounted() {
        this.getList()
    }
}
</script>

<style scoped lang="less">
.el-form {
    position:relative;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
        width: 500px;
    }

}
.el-loading-spinner{
        position: absolute;
        left: 0;
}

.demo-drawer{
    display: flex;
    justify-content: center;
    align-items: center;
    button {
        margin-top: 50px;
        width: 200px;
    }
}
/deep/.demo-drawer{
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    height: 800px;
    .el-form{
        display: flex;
        justify-content: center;
    }
}
</style>